<template>

 
 <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">主页面</el-breadcrumb-item>
          <el-breadcrumb-item>牛场管理</el-breadcrumb-item>
          <el-breadcrumb-item>牛的相关信息查询</el-breadcrumb-item>
         </el-breadcrumb>
  <el-divider/>

  <el-descriptions title="相关信息查询" :column="3"  border>

    <!-- 牛的耳号 -->

    <el-descriptions-item label="牛的耳号" >

      <el-input v-model="cattle.cattleId" style="width: 220px" placeholder="请输入耳号" clearable />

    </el-descriptions-item>


  </el-descriptions>

  <el-divider/>
  <!-- 添加按钮 -->

   <el-button type="primary" round @click="findCattleAny"  >查询单个</el-button>
<el-button type="primary" round @click="findCattleAll" >查询所有</el-button>
     <el-divider/>

     <el-table :data="tableData" style="width: 100%" height="300" border>
    <el-table-column fixed prop="cattleId" label="耳号" width="110" sortable/>
    <el-table-column prop="breedId" label="品种号" width="110" />
    <el-table-column prop="birthday" label="出生日期" width="155" />
    <el-table-column prop="weight" label="体重(kg)" width="100" />
    <el-table-column prop="sex" label="性别" width="100" />
    <el-table-column prop="quarantineSituation" label="检疫情况" width="300" />
    <el-table-column prop="remark" label="备注" width="100" />
  </el-table>

   

</template>


<script setup lang="ts">

import axios from 'axios';
import { ref } from 'vue';

const urlParams = new URLSearchParams(window.location.search);
let  cattleId= urlParams.get('cattleId')

const cattle = ref({
 
  cattleId: cattleId,

  breedId: '',

  birthday: '', // 初始化为''

  birthdayValue: null as Date | null, // 用于存储el-date-picker的值，可转换为日期字符串

  weight: '',

  sex: '',

  quarantineSituation: '',

  remark: '',

});

 const tableData = ref([]);


function findCattleAny() {

      axios.get(`http://localhost:8080/cattle/findCattleById?cattleId=${cattle.value.cattleId}`)

        .then((response) => {

          // 处理单个对象的结果
            tableData.value = [response.data];

        })

        .catch((error) => {

          console.error(error);

        });

    }

function findCattleAll() {

      axios.get(`http://localhost:8080/cattle/findCattleAll`)

        .then((response) => {

          // 后端返回的是一个包含多个对象的数组，直接赋值给tableData

          tableData.value = response.data;

        })

        .catch((error) => {

          console.error(error);

        });

    }

</script>